<template>
    <div class="reset-pwd-container">
        <div @click="backToSettingAccount" style="display: flex;flex-direction: row;cursor: pointer;">
            <img style="width: 24px;height: 24px;margin-right: 10px;" src="../../assets/imgs/icon/arrow_back_24px.png"
                alt="">
            <p style="font-size: 16px; font-weight: 400;color: #E6E0E9;">Back</p>
        </div>
        <div style="padding: 20px;">
            <p style="font-size: 24;font-weight: 700;color: #fff;margin-bottom: 32px;">Reset Password</p>
            <el-input v-model="oldPwdIpt" style="width: 332px;height: 56px;background-color:#292438;"
                placeholder="Old password"></el-input>
            <p style="font-size: 14px;color: #107DFB;margin-top: 10px;margin-bottom: 60px;">Forget your password?</p>
            <el-button style="background-color: #107DFB;color: #fff;border: none;width: 200px;height: 56px;"
                @click="resetPwdCheck">Next</el-button>
        </div>
    </div>
</template>

<script setup>
import { useRouter } from 'vue-router'
import local from '../../utils/local.js'
import { ref } from 'vue'
import { reset_password_check } from '../../apis/user.js'

const oldPwdIpt = ref('')
const router = useRouter()

const backToSettingAccount = () => {
    router.go(-1)
}

const resetPwdCheck = async () => {
    const user = JSON.parse(local.localGet("user"))
    console.log(user);
    let res = await reset_password_check({ email: user, reset_code: oldPwdIpt.value })
    console.log(res, 'res_____reset');
}

</script>

<style lang="scss" scoped>
.reset-pwd-container {
    padding: 20px;
}

:deep(.el-input__wrapper) {
    background-color: #292438;
}

:deep(.el-input__inner) {
    color: #fff;
}
</style>